<template>
  <div class="register">
    <cu-header :height="80" />
    <div class="register-container container">
      <div class="register-form">
        <p class="title">Registrado</p>
        <div class="form">
          <el-form ref="sendForm" :model="sendForm" label-width="200px" :rules="rules">
            <el-form-item label="Caixa postal" prop="email">
              <el-col :span="18"><el-input type="text" v-model="sendForm.email" placeholder="Digite o endereço de e- mail"></el-input></el-col>
              <el-col v-show="show" :span="5" :offset="1">
                <el-button type="primary" @click="sendMail" style="width:130px">Obter captcha</el-button>
              </el-col>
              <el-col v-show="!show" :span="5" :offset="1">
                <el-button type="primary" plain disabled style="width:130px">{{count}}</el-button>
              </el-col>
            </el-form-item>
            <el-form-item label="Código de verificação" prop="code">
              <el-input type="text" v-model="sendForm.code" placeholder="Digite o código de verificação"></el-input>
            </el-form-item>
            <el-form-item label="Nova senha" prop="password">
              <el-input type="text" v-model="sendForm.password" placeholder="Por favor, insira UMA Nova senha"></el-input>
            </el-form-item>
            <el-form-item label="Confirmar senha" prop="confirmPassword">
              <el-input type="text" v-model="sendForm.confirmPassword" placeholder="Confirmar senha"></el-input>
            </el-form-item>
            <el-form-item class="text-center">
              <el-button type="default" @click="cancel">cancelar</el-button>
              <el-button type="primary" @click="handleSubmit">enviar</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <cu-footer />
  </div>
</template>
<script>
import CuHeader from '@/components/header';
import CuFooter from '@/components/footer';
import Api from '@/api';
export default {
  name: 'Forget',
  components: { CuHeader, CuFooter },
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      sendForm: {
        email: '',
        code: '',
        password: '',
        confirmPassword: ''
      },
      imageUrl: '',
      rules: {
          email: [
            { required: true, trigger: 'blur' },
          ],
           code: [
            { required: true, trigger: 'blur' },
          ],
           password: [
            { required: true, trigger: 'blur' },
          ],
           confirmPassword: [
            { required: true, trigger: 'blur' },
          ],
      },
      show:true,
      count: '',
      timer: null,
    };
  },
  methods: {
    sendMail(){
      if(this.sendForm.email === ''){
        this.$message.info('请填写邮箱')
        return false
      }
      const TIME_COUNT = 90;
      if (!this.timer) {
        this.count = TIME_COUNT;
        Api.sendCodeEmail(this.sendForm.email).then(res => {
          console.log(res)
          if(res === 'SUCCESS'){
            this.$mesage.success('success')
          }
          //发送邮件成功
        })
        this.show = false;
        this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
            } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            }
          }, 1000)
        }
      
    },
    cancel() {
      this.$router.go(-1)
    },
    handleSubmit() {
      this.$refs.sendForm.validate((valid) => {
        if (valid) {
          Api.resetPassword(this.sendForm).then(res => {
            console.log(res)
            //重置密码成功
            this.$message.success("Success")
            this.$router.push("/")
          })
        } else {
          // this.$message.info('请填写必填信息')
          return false;
        }
      });
      
    },
  },
};
</script>
<style lang="scss" scoped>
.register {
  min-height: 100vh;
  background: #f2f2f2;
  .register-container {
    padding: 50px 0;
    .register-form {
      padding: 20px;
      background: #fff;
      border-radius: 4px;
      .title {
        color: #333;
        font-weight: bold;
        font-size: 16px;
        padding-left: 15px;
        margin-top: 20px;
        margin-bottom: 20px;
      }
      .form {
        width: 60%;
      }
    }
  }
}
</style>
